<template>
  <div>
    <div class="page-title">我待审核的问题</div>
    <div class="page-content">
    
<!-- 查询输入框，按钮 -->
      <el-form
        :inline="true"
        :model="filterQuery"
        @submit.native.prevent="handleSearch">
        <el-row>
          <el-form-item label="检查单位">
            <treeselect
            :multiple="false"
            :options="options"
            placeholder="选择单位"
            v-model="filterQuery.companyCode"
            style="width:220px"
            :searchable="false"/> 
          </el-form-item >
          <el-form-item label="检查日期">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width:250px"
            unlink-panels="false"
            :editable="false">
          </el-date-picker>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" native-type='submit' icon='el-icon-search' style="width:100%">查询</el-button>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="export2Excel()" style="width:100%">导出Excel</el-button>
            </el-form-item>
        </el-row>
      </el-form>

<!-- 问题列表table -->
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        @row-click="clickTable"
        ref="refTable"
        style="width: 100%">
      <el-table-column type="expand">

 <!-- 点击某一问题，查看详情的form表单 -->
        <template slot-scope="props">
          <el-form label-position="left" inline class="table-expand" label-width="130px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="检查人员：">{{ props.row.checkPerson}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检查日期：">{{ props.row.checkDate }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="单位：">{{ props.row.parentCompanyName }}</el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item  label="班组：">{{ props.row.companyName }}</el-form-item>         
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
               <el-form-item  label="检查地点：">{{ props.row.checkStation }}</el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item  label="检查项目：">{{ props.row.checkItem }}</el-form-item>
              </el-col> -->
            </el-row>
            <!-- <el-row>
                <el-form-item  label="检查项：">{{ props.row.checkListItemName }}</el-form-item>
            </el-row> -->
            <el-row>
                <el-form-item  label="问题描述：">{{ props.row.description }}</el-form-item>
            </el-row>
            <el-row>
                <el-form-item  label="备注：">{{ props.row.note }}</el-form-item>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题类型：">{{ props.row.problemType }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="问题程度：">{{ props.row.problemRank }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="问题原因：">{{ props.row.problemSource }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="安全绩效扣分：">{{ props.row.lostScore }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
                <el-form-item  label="依据：">{{ props.row.problemGist }}</el-form-item>      
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="责任人：">{{ props.row.responsePersonName }}</el-form-item>   
              </el-col>
              <el-col :span="12">
               <el-form-item label="用工性质：">{{ props.row.employmentProperty }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">   
                <el-form-item  label="所在岗位：">{{ props.row.workingName }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label="岗位工龄：">{{ props.row.workingAge }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item  label="整改责任人：">{{ props.row.supervisorName }}</el-form-item>
              </el-col> 
              <el-col :span="12">
                <el-form-item  label="问题体系要素：">{{ problem.HseFactor }}</el-form-item>
              </el-col>    
            </el-row>
            <el-form-item label="检查图片："></el-form-item>
                <el-row >
                <el-col :span="6">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach1 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach1" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach1" :alt="props.row.checkAttach1" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach2 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach2" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach2" :alt="props.row.checkAttach2" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="6">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach3 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.checkAttach3" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach3" :alt="props.row.checkAttach3" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
                <el-col :span="6">
                   <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkAttach4 !==''">
                  <el-popover placement="right" title="" trigger="click">
                    <div style="max-width:600px;height:auto"><img :src="props.row.rectAttach4" style="max-width:600px;height:auto"/></div>
                    <img slot="reference" :src="props.row.checkAttach4" :alt="props.row.checkAttach4" style="max-height: 240px">
                  </el-popover><br/>
                </el-card>
                </el-col>
              </el-row>
              <el-form-item label="检查视频："></el-form-item>
                <el-row >
                <el-col :span="6">
                  <el-card :body-style="{ padding: '10px' }" style="width:90%;height:240px" v-if="props.row.checkVideo !==''">
                   <video width="100%" height="230" controls>
                  <source :src="props.row.checkVideo" type="video/mp4">
                </video>
                </el-card>
                </el-col>
               </el-row>

          </el-form>
        </template>
      </el-table-column>
    
    
      <!-- 问题列表，显示在table里面的内容 -->
    <el-table-column type="index" :index="this.indexStartNum" label="序号" width="50"></el-table-column>
    <el-table-column
      label="单位"
      prop="parentCompanyName"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="基层单位"
      prop="basicCompanyName"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="班组"
      prop="companyName"
      header-align="center">
    </el-table-column>
    <el-table-column show-overflow-tooltip
      label="问题描述"
      prop="description"
      header-align="center">
    </el-table-column>
    <el-table-column show-overflow-tooltip
      label="地点"
      prop="checkStation"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="检查日期"
      prop="checkDate"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="问题状态"
      prop="status"
      header-align="center">
    </el-table-column>
    <el-table-column
      label="责任人"
      prop="responsePersonName"
      header-align="center">
    </el-table-column>
    <el-table-column label="操作" align="center" header-align="center" >
      <template slot-scope="scope">        
            <el-button size="mini" @click="editProblem(scope.row,'editProblem')"  type="primary"> <i class="el-icon-edit"></i>审核</el-button>
          <!-- &nbsp;&nbsp;
          <el-button   size="mini" icon='el-icon-view' @click="open(scope.row.verifyModification)" v-if="scope.row.status ==='验证未通过'">审核意见</el-button>
          <el-button   size="mini" icon='el-icon-view' :disabled=true v-else>审核意见</el-button>
          &nbsp;&nbsp; -->
      </template>
   </el-table-column>
  </el-table>
  <div class="pagination-base">
    <el-pagination
      @current-change="handlePageChange"
      :current-page="filterQuery.pageIdx"
      :page-size="filterQuery.pageSize"
      :total="total"
      background
      layout="total, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
    </div>
    <service-dialog
      :show.sync="showDialog"
      :add-data="dataToDialog"
      @cancelDialog="cancelDialog"
      @submitDialog="submitDialog"
    ></service-dialog>
  </div>
  
</template>

<script>
import serviceDialog from "./examine";
import {GetCQPersonNeedExamine} from '../../../services/cq_problem_acceptance'
import {GetCQCompany} from '../../../services/gettreedata'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

const DefaultQuery = {
  companyCode: null,
  checkDate1:'',
  checkDate2:'',
  status:'未审核',
  pageIdx: 1,
  pageSize: 10,
  // type:'all'
}
const DefaultQueryExcel = {
  companyCode: null,
  checkDate1:'',
  checkDate2:'',
  status:'未审核',
  pageIdx: 1,
  pageSize: 10,
  type:'all'
}
export default {
  components: {
    serviceDialog
  },
  data () {
    return {
      showDialog: false,
      dataToDialog: {},
      indexStartNum:1,
      client:VueCookies.get("client"),
      dateRange:[], //选择时间
      options: [], //选择单位
      filterQuery: {},
      filterQueryExcel: {},
      fitertask: {},
      total: 0,
      loading: false,
      tableData:[],
      problemAyy:'',
      timeout: null,
      excelData:[]
    }
  },

  mounted () {
    this.loadFilterParams() //加载默认条件
    this.handleGetProblems() //获取全部问题
    this.getDate() // 获取公司列表
  },
    
  methods:{
    open(data) {
      this.$alert(data, {
      confirmButtonText: '确定',})
    },
    //时间选择
     checkFilterParams () {
        //datepicker range 绑定的数据是数组,需要拆成后端识别的2个参数
        if (this.dateRange && this.dateRange.length === 2) {
          this.filterQuery.checkDate1 = this.dateRange[0]+' '+'00:00:00'
          this.filterQuery.checkDate2 = this.dateRange[1]+' '+'23:59:59'
          } else {
            this.filterQuery.checkDate1 = ''
            this.filterQuery.checkDate2 = ''
          }
        },
        //加载默认条件
       loadFilterParams () {
          //从query读取过滤条件
          //this.filterQuery = {...DefaultQuery, ...this.$route.query}
          this.filterQuery = {...DefaultQuery, ...this.$route.query}
          //从query中取到的参数是string的,要转成element要求的number
          this.filterQuery = {...this.filterQuery,
          pageIdx: parseInt(this.filterQuery.pageIdx, 10),
          pageSize: parseInt(this.filterQuery.pageSize, 10),
          }
          //填充datepicker range组件的内容
          if (this.filterQuery.checkDate1 && this.filterQuery.checkDate2) {
            this.dateRange = [this.filterQuery.checkDate1, this.filterQuery.checkDate2]
            }
          },
    //获取公司
    getDate(){
      GetCQCompany().then((res) => {
      this.options = res.data 
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },
    // 导出Excel
    export2Excel() {
      this.filterQueryExcel = {...DefaultQueryExcel, ...this.$route.query}
      this.filterQueryExcel = {
        ...this.filterQueryExcel,
      }
      this.excelData=GetCQPersonNeedExamine(this.filterQueryExcel).then((data) => {
        this.excelData = data.data
        this.loading = false
        //console.log(JSON.stringify(this.excelData))
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../../vendor/Export2Excel');
          const tHeader = ['检查人员','检查时间','单位','基层单位','班组','检查地点','问题描述','备注','问题类型','问题程度',
          '问题原因','安全绩效扣分：','依据',
          '责任人','用工性质','所在岗位','岗位工龄','整改责任人'];
          // 上面设置Excel的表格第一行的标题
          const filterVal = ['checkPerson','checkDate','parentCompanyName','basicCompanyName',
                             'companyName','checkStation','description','note','problemType','problemRank',
                             'problemSource','lostScore','problemGist',
                             'responsePersonName','employmentProperty','workingName','workingAge','supervisorName'];
          // 上面的index、phone_Num、school_Name是tableData里对象的属性
          const list = this.excelData;  //把data里的tableData存到list
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '列表excel');
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

  //点击行，显示详情
     clickTable(row){
        this.$refs.refTable.toggleRowExpansion(row)
      },
  //获取全部问题，显示在table
    handleGetProblems () {
      this.checkFilterParams()
      this.loading = true
      this.$router.push({query: this.filterQuery})
      GetCQPersonNeedExamine(this.filterQuery).then((res) => {
        //console.log(JSON.stringify(res))
        this.tableData = res.data.list
        this.total = res.data.total
        this.filterQuery.pageIdx = res.data.page
        this.indexStartNum = ((this.filterQuery.pageIdx - 1) * this.filterQuery.pageSize) + 1;
        this.loading = false
      }).catch((err) => {
        this.$message.error(err.message)
        this.loading = false
      })
    },

    cancelDialog(val) {
      this.dataToDialog = {};
      this.showDialog = val;
    },
    submitDialog(val) {
      this.dataToDialog = {};
      this.showDialog = val;
    },
    getDialogVdateReffect() {
      let date = new Date();
      let month =
        date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() <= 9 ? "0" + date.getDate() : date.getDate();
      this.dataToDialog.verifyDate =
        date.getFullYear() + "-" + month + "-" + day;
      this.dataToDialog.rectEffect = "合格";
    },
    editProblem(row, method) {
      this.dataToDialog = row;
      this.dataToDialog.method = method;
      this.dataToDialog.checkCompanyList = new Object(
        this.dealCompanyCode(row.companyCode)
      );
      if (this.dataToDialog.immediately == "否") this.getDialogVdateReffect();
      this.showDialog = true;
    },
    dealCompanyCode(companyCode) {
      let checkCompanyList = [];
      let i = 0;
      while (i < companyCode.length) {
        checkCompanyList.push(companyCode.slice(0, i + 2));
        i = i + 2;
      }
      return checkCompanyList;
    },
  
  //页码改变
    handlePageChange (page) {
      this.filterQuery.pageIdx = page
      this.handleGetProblems()
    },
    
  //查询
    handleSearch () {
      this.handleGetProblems()
    },

  }
}
</script>
<style media="screen">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    /* width: 49%; */
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    /* width: 49%; */
  }
  /*分辨率低于1280，采用下面的样式*/
    @media screen and (max-device-width:1280px){
        .outDiv{
          width: 1060px;
        }
    }
    /*分辨率高于1280，采用下面的样式*/
    @media screen and (min-device-width: 1281px){
        .outDiv{
          width: 100%;
        }
    }
  
</style>
